﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>FitImage — MooTools</title>
	<link rel="stylesheet" href="fitimage_style.css" type="text/css" />
</head>
<body>
	<img src="fitimage_bg.jpg" class="background" style="width: 1678px;
		height: 1259px; left: 0px; top: -184px;"/>
	<div class="global-wrapper">
		<div class="wrapper">
			<h1>
				FitImage</h1>
			<p>
				FitImage allows you to have a background image stretched proportionally to full
				screen width and height. It also remains fixed while the user scrolls the page.
				Like on <a href="http://thesixtyone.com/">thesixtyone</a>
			</p>
			<h2>
				How to use</h2>
			<p>
				Using FitImage is as simple as it gets:
			</p>
			<code class="box">new FitImage('/background.jpg'); </code>
			<p>
				Also note, that this plugin does not include any style properties except those that
				are dynamically generated, so you will have to add some styles to your stylesheets:
			</p>
			<code class="box">img.resize-background {<br>
				&nbsp;&nbsp;&nbsp;&nbsp;position: fixed;<br>
				&nbsp;&nbsp;&nbsp;&nbsp;z-index: 1;<br>
				} </code>
			<h2>
				Configuration</h2>
			<p>
				The following configuration options are available:
			</p>
			<ul>
				<li><code>class</code>: image element class name. </li>
				<li><code>center</code>: should the image be centered or not. Defaults to <code>true</code>.
				</li>
				<li><code>minWidth</code>: minimum image width. If the screen width is less than the
					minimum width, image size will not be reduced. Defaults to <code>1024</code>.
				</li>
				<li><code>minHeight</code>: minimum image height. Behaves identical to minWidth. Defaults
					to <code>768</code>. </li>
				<li><code>primary</code>: defines which dimension should perfectly fit the screen.
					Either <code>width</code>, <code>height</code> or <code>auto</code>. The auto setting
					makes sure the image completely covers the screen. Defaults to <code>auto</code>.
				</li>
				<li><code>injectElement</code>: element to be passed to the inject method. Defaults
					to <code>document.body</code>. </li>
				<li><code>injectPosition</code>: position to be passed to the inject method. Defaults
					to <code>top</code>. </li>
			</ul>
			<h2>
				Links</h2>
			<ul>
				<li><a href="http://github.com/kpobococ/FitImage">Github repository</a></li>
				<li><a href="http://mootools.net/forge/p/fitimage">MooTools Forge plugin page</a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/'; </script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/util/dom/fitimage.js"></script>
</body>
</html>
